import Add from '../componets/hotPlay/add.js';
import Delete from '../componets/hotPlay/del.js';
let { $, table, layer, form } = layui;
export default class HotPlay {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <style>
            .select{
                width: 100px;
              }
            </style>
        </head>
        <body>
        <!-- 表格 -->
        <table id="soonsTable" lay-filter="soonsTable"></table>
        <!-- 工具栏模板 -->
        <script type="text/html" id="tools">
          <form class="layui-form" lay-filter="searchForm" action="#">
          <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="add">新增电影</button>
          </div>
          <div class="layui-input-inline select" >
            <select name="type" id="select" lay-verify="" lay-filter="soonsSelect">
              <option value="name" selected>电影名</option>
              <option value="type">电影类型</option>
              <option value="area">上映区域</option>
              <option value="year">年代</option>

            </select>
          </div>
          <div class="layui-input-inline">
            <input type="text" name="value" id="searchValue" required lay-verify="required" placeholder="根据电影名查询" autocomplete="off"
              class="layui-input">
          </div>
          <div class="layui-input-inline">
          <button type="button" class="layui-btn layui-icon layui-icon-search" lay-event="search"></button>
          </div>
        </form>
        </script>
        <script type="text/html" id="operation">
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
        </script>
        <script type="text/html" id="addSoonsTemplate"></script>
        <script type="text/html" id="updateSoonsTemplate"></script>
        </body>
        </html>
        `;
        $("#content").html(template);
    }
    handle() {
        table.render({
            elem: '#soonsTable',
            url: '/hotPlay',
            method: "get",
            page: true,
            limit: 5,
            limits: [5, 10, 15, 20],
            request: {
                pageName: 'current',
                limitName: 'pageSize'
            },
            parseData: function (res) {
                return {
                    code: 0,
                    count: res.data.total,
                    data: res.data.rows
                }
            },
            toolbar: "#tools",
            cols: [[ //表头
                {
                    field: 'name', title: '电影名', templet(d) {
                        return d.films ? d.films.name : "";
                    }
                },
                {
                    field: 'ename', title: '电影英文名', templet(d) {
                        return d.films ? d.films.ename : "";
                    }
                },
                {
                    field: 'type', title: '电影类型', templet(d) {
                        return d.films ? d.films.type : "";
                    }
                },
                {
                    field: 'area', title: '上映区域', templet(d) {
                        return d.films ? d.films.area : "";
                    }
                },
                {
                    field: 'score', title: '评分', templet(d) {
                        return d.films ? d.films.score : "";
                    }
                },
                {
                    field: 'actor', title: '演员', templet(d) {
                        let str = '';
                        // console.log(d);
                        if (d.films) {
                            for (let i = 0; i < d.films.actor.length; i++) {
                                str += d.films.actor ? d.films.actor[i].name + '/' : "";
                            }
                        }
                        return str;
                    }
                },
                {
                    field: 'year', title: '年代', templet(d) {
                        return d.films ? d.films.year : "";
                    }
                },
                {
                    field: 'time', title: '时长', templet(d) {
                        return d.films ? d.films.time : "";
                    }
                },
                {
                    field: 'upDate', title: '上映时间', templet(d) {
                        return d.films ? d.films.upDate : "";
                    }
                },
                {
                    field: 'count', title: '票房', templet(d) {
                        return d.films ? d.films.count : "";
                    }
                },
                // {
                //     field: 'images', title: '图片', templet(d) {
                //         let str = '';
                //         // console.log(d);
                //         if (d.films) {
                //             for (let i = 0; i < d.films.images.length; i++) {
                //                 str += d.films.actor ? d.films.images[i].name + '/' : "";
                //             }
                //         }
                //         return str;
                //     }
                // },
                { title: '操作', templet: '#operation' }
            ]]
        });
        table.on("tool(soonsTable)", function (obj) {
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                new Delete(data);
            }
        })
        table.on("toolbar(soonsTable)", function (obj) {
            switch (obj.event) {
                //增加
                case 'add':
                    new Add();
                    break;
                //搜索
                case 'search':
                    table.reload("soonsTable", {
                        where: {
                            type: $("#select").val(),
                            value: $("#searchValue").val()
                        }
                    });
                    break;
            }
        });
        form.on("select(soonsSelect)", function (obj) {
            // console.log($('option:selected').text());
            $("[name='value']").attr("placeholder", `根据${$('option:selected').html()}查询`);
        });
    }
}